<template>
  <div>
    <div class="content-goods-publish">
      <Form ref="baseInfoForm" :model="baseInfoForm" :label-width="120" :rules="baseInfoFormRule">
        <div class="base-info-item">
          <h4>基本信息</h4>
          <div class="form-item-view">
            <FormItem label="商品分类">
              <span class="goods-category-name">{{
                this.baseInfoForm.categoryName[0]
              }}</span>
              <span> &gt; {{ this.baseInfoForm.categoryName[1] }}</span>
              <span> &gt; {{ this.baseInfoForm.categoryName[2] }}</span>
            </FormItem>
            <FormItem label="商品名称" prop="goodsName">
              <Input type="text" v-model="baseInfoForm.goodsName" placeholder="商品名称" clearable style="width: 260px" />
            </FormItem>

            <!-- <FormItem label="商品价格" prop="price">
							<Input type="text" v-model="baseInfoForm.price" placeholder="商品价格" clearable
								style="width: 260px" />
						</FormItem> -->
            <FormItem label="商品卖点" prop="sellingPoint">
              <Input v-model="baseInfoForm.sellingPoint" type="textarea" :rows="4" style="width: 260px" />
            </FormItem>
            <!-- <Form-item label="区域" prop="salesArea">
            <regions style="width: 350px" @selected="selectedRegionSearch" />
          </Form-item> -->
            <FormItem label="商品品牌" prop="brandId">
              <Input type="text" v-model="baseInfoForm.brandId" placeholder="商品品牌" clearable style="width: 260px" />
            </FormItem>
          </div>
          <h4>商品交易信息</h4>
          <div class="form-item-view">
            <FormItem class="form-item-view-el" label="计量单位" prop="goodsUnit">
              <Select v-model="baseInfoForm.goodsUnit" style="width: 100px">
                <Option v-for="(unit, i) in goodsUnitList" :key="i" :value="unit">{{ unit }}
                </Option>
              </Select>
            </FormItem>
            <FormItem class="form-item-view-el" label="销售模式" prop="salesModel">
              <RadioGroup type="button" v-if="baseInfoForm.goodsType != 'VIRTUAL_GOODS'" button-style="solid"
                v-model="baseInfoForm.salesModel">
                <Radio title="零售型" label="RETAIL">零售型</Radio>
                <!-- <Radio title="批发型" label="WHOLESALE">批发型</Radio> -->
              </RadioGroup>
              <RadioGroup type="button" v-else button-style="solid" v-model="baseInfoForm.salesModel">
                <Radio title="零售型" label="RETAIL">
                  <span>虚拟型</span>
                </Radio>
              </RadioGroup>
            </FormItem>
            <FormItem class="form-item-view-el" label="销售区域" prop="salesArea">
              <RadioGroup type="button" button-style="solid" v-model="baseInfoForm.salesArea">
                <Radio title="全国销售" :label="0">
                  <span>全国销售</span>
                </Radio>
                <Radio title="区域销售" :label="1">
                  <span>区域销售</span>
                </Radio>
              </RadioGroup>
              <region v-if="baseInfoForm.salesArea=='1'" :addressId="morenregionId" style="width: 350px;margin-top:24px"
                @selected="selectedRegionSearch" />
            </FormItem>
          </div>
          <h4>商品规格及图片</h4>
          <div class="form-item-view">
            <FormItem class="form-item-view-el required" label="商品图片" prop="goodsGalleryFiles">
              <div style="display: flex; flex-wrap: flex-start">
                <vuedraggable :list="baseInfoForm.goodsGalleryFiles" :animation="200">
                  <div class="demo-upload-list" v-for="(item, __index) in baseInfoForm.goodsGalleryFiles"
                    :key="__index">
                    <template>
                      <img :src="item.url" />
                      <div class="demo-upload-list-cover">
                        <div>
                          <Icon type="md-search" size="30" @click.native="handleViewGoodsPicture(item.url)"></Icon>
                          <Icon type="md-trash" size="30" @click.native="handleRemoveGoodsPicture(item)"></Icon>
                        </div>
                      </div>
                    </template>
                  </div>
                </vuedraggable>

                <Upload ref="upload" :show-upload-list="false" :on-success="handleSuccessGoodsPicture"
                  :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError"
                  :on-exceeded-size="handleMaxSize" :max-size="3072" :before-upload="handleBeforeUploadGoodsPicture"
                  multiple type="drag" :action="uploadFileUrl" :headers="{ ...accessToken }" style="margin-left: 10px">
                  <div style="width: 148px; height: 148px; line-height: 148px">
                    <Icon type="md-add" size="20"></Icon>
                  </div>
                </Upload>
              </div>
              <Modal title="View Image" v-model="goodsPictureVisible">
                <img :src="previewGoodsPicture" v-if="goodsPictureVisible" style="width: 100%" />
              </Modal>
            </FormItem>
            <div class="layout" style="width: 100%">
              <Collapse v-model="open_panel">
                <Panel name="1">
                  自定义规格项
                  <div slot="content">
                    <Form>
                      <div v-for="(item, $index) in skuInfo" :key="$index" class="sku-item-content">
                        <Card :bordered="true" class="ivu-card-body">
                          <Button type="primary" slot="extra" @click="handleCloseSkuItem($index)">
                            删除规格
                          </Button>
                          <div>
                            <FormItem label="规格名" class="sku-item-content-val flex">
                              <AutoComplete style="width: 150px" v-model="item.name" :maxlength="30"
                                placeholder="请输入规格项名称" :filter-method="filterMethod" :data="skuData"
                                @on-change="editSkuItem">
                              </AutoComplete>
                            </FormItem>
                          </div>
                          <div class="flex sku-val">
                            <Form :model="item" class="flex">
                              <!--规格值文本列表-->
                              <FormItem v-for="(val, index) in item.spec_values" :key="index"
                                class="sku-item-content-val flex" label="规格项" :prop="'spec_values.' + index + '.value'"
                                :rules="[regular.REQUIRED, regular.VARCHAR60]">
                                <AutoComplete v-model="val.value" style="width: 150px" :maxlength="30"
                                  placeholder="请输入规格项" :filter-method="filterMethod" :data="skuVal"
                                  @on-focus="changeSkuVals(item.name)"
                                  @on-change="skuValueChange(val.value, $index, item)">
                                </AutoComplete>
                                <Button type="primary" size="small" style="margin-left: 10px"
                                  @click="handleCloseSkuValue(item, index)">
                                  删除
                                </Button>
                              </FormItem>
                            </Form>
                          </div>
                          <div>
                            <Button @click="addSpec($index, item)">添加规格值</Button>
                          </div>
                        </Card>
                      </div>
                    </Form>
                    <Button class="add-sku-btn" type="primary" size="small" @click="addSkuItem">添加规格项</Button>
                  </div>
                </Panel>
                <Panel name="2">
                  规格详细
                  <div slot="content">
                    <div slot="content">
                      <!-- #TODO 此处有待优化  -->
                      <Table class="mt_10" :columns="skuTableColumn" :data="skuTableData" style="
                          width: 100%;
                          .ivu-table-overflowX {
                            overflow-x: hidden;
                          }
                        ">
                        <template slot-scope="{ row }" slot="sn">
                          <Input clearable v-model="row.sn" placeholder="请输入货号"
                            @on-change="updateSkuTable(row, 'sn')" />
                        </template>
                        <!-- <div slot-scope="{ row }" slot="fee"
													v-if="baseInfoForm.goodsType != 'VIRTUAL_GOODS'">
													<Input clearable v-model="row.fee" placeholder="请输入扣率"
														@on-change="updateSkuTable(row, 'fee')" />
												</div> -->
                        <template slot-scope="{ row }" slot="quantity">
                          <Input clearable v-model="row.quantity" placeholder="请输入库存"
                            @on-change="updateSkuTable(row, 'quantity')" />
                        </template>
                        <template slot-scope="{ row }" slot="fee">
                          <Input clearable v-model="row.fee" placeholder="请输入扣率" @on-change="updateSkuTable(row, 'fee')"
                            disabled />
                        </template>
                        <template slot-scope="{ row }" slot="cost">
                          <Input clearable v-model="row.cost" placeholder="请输入结算价"
                            @on-change="updateSkuTable(row, 'cost')" />
                        </template>
                        <template slot-scope="{ row }" slot="price">
                          <Input clearable v-model="row.price" placeholder="请输入零售价"
                            @on-change="updateSkuTable(row, 'price')" />
                        </template>
                        <template slot-scope="{ row }" slot="images">
                          <Button @click="editSkuPicture(row)">编辑图片</Button>
                          <Modal v-model="showSkuPicture" :styles="{ top: '30px' }" class-name="sku-preview-modal"
                            title="编辑图片" ok-text="结束编辑" @on-ok="updateSkuPicture()" cancel-text="取消">
                            <div class="preview-picture">
                              <img v-if="previewPicture !== ''" :src="previewPicture" />
                            </div>
                            <Divider />
                            <vuedraggable :list="selectedSku.images" :animation="200" style="display: inline-block">
                              <div class="sku-upload-list" v-for="(img, __index) in selectedSku.images" :key="__index">
                                <template>
                                  <img :src="img.url" />
                                  <div class="sku-upload-list-cover">
                                    <Icon type="md-search" @click="handleView(img.url)"></Icon>
                                    <Icon type="md-trash" @click="handleRemove(img, __index)"></Icon>
                                  </div>
                                </template>
                              </div>
                            </vuedraggable>
                            <Upload ref="uploadSku" :show-upload-list="false" :on-success="handleSuccess"
                              :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError"
                              :on-exceeded-size="handleMaxSize" :max-size="3072" :before-upload="handleBeforeUpload"
                              :action="uploadFileUrl" :headers="{ ...accessToken }"
                              style="display: inline-block; width: 58px">
                              <div>
                                <Icon type="ios-camera" size="55"></Icon>
                              </div>
                            </Upload>
                          </Modal>
                        </template>
                      </Table>
                    </div>
                  </div>
                </Panel>
              </Collapse>
            </div>
          </div>
          <h4>商品详情描述</h4>
          <div class="form-item-view">
            <div class="tree-bar">
              <FormItem class="form-item-view-el" label="店铺分类" prop="shopCategory">
                <Tree ref="tree" style="text-align: left" :data="shopCategory" show-checkbox
                  @on-select-change="selectTree" @on-check-change="changeSelect" :check-strictly="false"></Tree>
              </FormItem>
              <FormItem class="form-item-view-el" label="保质期" prop="shelfLife">
                <Input type="text" v-model="baseInfoForm.shelfLife" placeholder="请输入商品保质期" clearable
                  style="width: 260px" />
              </FormItem>
              <FormItem class="form-item-view-el" label="生产日期" prop="productionDate">
                <Date-picker type="date" v-model="baseInfoForm.productionDate" format="yyyy-MM-dd"
                  placeholder="选择商品生产日期" style="width: 260px" @on-change="memberEndTimecli"></Date-picker>
              </FormItem>
            </div>
            <FormItem class="form-item-view-el" label="商品描述" prop="intro">
              <editor eid="intro" v-model="baseInfoForm.intro"></editor>
            </FormItem>
            <!-- <FormItem class="form-item-view-el" label="移动端描述" prop="skuList">
							<editor eid="mobileIntro" v-model="baseInfoForm.mobileIntro"></editor>
						</FormItem> -->
          </div>
          <div v-if="baseInfoForm.goodsType != 'VIRTUAL_GOODS'">
            <h4>商品物流信息</h4>
            <div class="form-item-view">
              <FormItem class="form-item-view-el" label="物流模板" prop="templateId">
                <Select v-model="baseInfoForm.templateId" style="width: 200px">
                  <Option v-for="item in logisticsTemplate" :value="item.id" :key="item.id">
                    {{ item.name }}
                  </Option>
                </Select>
              </FormItem>
            </div>
            <h4>其他信息</h4>
            <div class="form-item-view">
              <FormItem class="form-item-view-el" label="商品发布" prop="release">
                <RadioGroup type="button" button-style="solid" v-model="baseInfoForm.release">
                  <Radio title="立即发布" :label="1">
                    <span>立即发布</span>
                  </Radio>
                  <Radio title="放入仓库" :label="0">
                    <span>放入仓库</span>
                  </Radio>
                </RadioGroup>
              </FormItem>
              <!-- <FormItem class="form-item-view-el" label="商品推荐" prop="skuList">
								<RadioGroup type="button" button-style="solid" v-model="baseInfoForm.recommend">
									<Radio title="推荐" :label="1">
										<span>推荐</span>
									</Radio>
									<Radio title="不推荐" :label="0">
										<span>不推荐</span>
									</Radio>
								</RadioGroup>
							</FormItem> -->
            </div>
            <div class="form-item-view-bottom">
              <Collapse v-model="params_panel" v-for="(paramsGroup, groupIndex) in goodsParams"
                :title="paramsGroup.groupName" class="mb_10" style="text-align: left" :key="paramsGroup.groupName">
                <Panel :name="paramsGroup.groupName">
                  {{ paramsGroup.groupName }}
                  <p slot="content">
                    <FormItem v-for="(params, paramsIndex) in paramsGroup.params" :key="paramsIndex"
                      :label="`${params.paramName}：`">
                      <Select v-model="params.paramValue" placeholder="请选择" style="width: 200px" clearable @on-change="
                          selectParams(
                            paramsGroup,
                            groupIndex,
                            params,
                            paramsIndex,
                            params.paramValue
                          )
                        ">
                        <Option v-for="option in params.options.split(',')" :label="option" :value="option"
                          :key="option"></Option>
                      </Select>
                    </FormItem>
                  </p>
                </Panel>
              </Collapse>
            </div>
          </div>
        </div>
      </Form>
    </div>
    <!-- 底部按钮 -->
    <div class="footer">
      <ButtonGroup>
        <Button type="primary" @click="pre" v-if="!$route.query.id && !$route.query.draftId">上一步
        </Button>
        <Button type="primary" @click="save" :loading="submitLoading">
          {{ this.$route.query.id ? "保存" : "保存商品" }}
        </Button>
        <!-- <Button type="primary" @click="saveToDraft">保存为模版</Button> -->
      </ButtonGroup>
    </div>
  </div>
</template>
<script>
  import regions from "@/views/lili-components/regions";
  import region from "@/views/lili-components/region-every";
  import * as API_GOODS from "@/api/goods";
  import * as API_Shop from "@/api/shops";
  import cloneObj from "@/utils/index";
  import vuedraggable from "vuedraggable";
  import editor from "@/views/my-components/lili/editor";
  import {
    uploadFile
  } from "@/libs/axios";
  import {
    regular
  } from "@/utils";

  export default {
    components: {
      editor,
      regions,
      region,
      vuedraggable,
    },
    props: {
      firstData: {
        default: {},
        type: Object,
      },
    },
    data() {
      // 表单验证项，商品价格
      const checkPrice = (rule, value, callback) => {
        if (!value && value !== 0) {
          return callback(new Error("商品价格不能为空"));
        }
        setTimeout(() => {
          if (!regular.money.test(value)) {
            callback(new Error("请输入正整数或者两位小数"));
          } else if (parseFloat(value) > 99999999) {
            callback(new Error("商品价格设置超过上限值"));
          } else {
            callback();
          }
        }, 1000);
      };
      // 表单验证项，商品编号
      const checkSn = (rule, value, callback) => {
        if (!value) {
          callback(new Error("商品编号不能为空"));
        } else if (!/^[a-zA-Z0-9_\\-]+$/g.test(value)) {
          callback(new Error("请输入数字、字母、下划线或者中划线"));
        } else if (value.length > 30) {
          callback(new Error("商品编号长度不能大于30"));
        } else {
          callback();
        }
      };
      // 表单验证项，商品重量
      const checkWeight = (rule, value, callback) => {
        if (!value && typeof value !== "number") {
          callback(new Error("重量不能为空"));
        } else if (!regular.money.test(value)) {
          callback(new Error("请输入正整数或者两位小数"));
        } else if (parseFloat(value) > 99999999) {
          callback(new Error("商品重量设置超过上限值"));
        } else {
          callback();
        }
      };
      return {
        morenregionId: '', // 默认地区
        regular,
        accessToken: "", //令牌token
        goodsParams: "",
        categoryId: "", // 商品分类第三级id
        //提交状态
        submitLoading: false,
        //上传图片路径
        uploadFileUrl: uploadFile,
        // 预览图片路径
        previewPicture: "",
        //商品图片
        previewGoodsPicture: "",
        //展示图片层
        visible: false,
        //展示商品图片
        goodsPictureVisible: false,
        //展示sku图片
        showSkuPicture: false,
        //选择的sku
        selectedSku: {},
        /** 发布商品基本参数 */
        baseInfoForm: {
          salesModel: "RETAIL",
          /** 商品相册列表 */
          goodsGalleryFiles: [],
          /** 是否立即发布 true 立即发布 false 放入仓库 */
          release: 1,
          /** 是否为推荐商品 */
          recommend: 0,
          /** 店铺分类 */
          storeCategoryPath: "",
          brandId: '',
          /** 计量单位 **/
          goodsUnit: "",
          /** 商品类型 **/
          goodsType: "",
          /** 分类路径 **/
          categoryPath: "",
          /** 商品卖点 **/
          sellingPoint: "",
          /** 商品详情 **/
          intro: "",
          mobileIntro: "",
          updateSku: true,
          /** 是否重新生成sku */
          regeneratorSkuFlag: false,
          /** 物流模板id **/
          templateId: "",
          // 销售区域
          salesArea: 0,
          /** 参数组*/
          goodsParamsDTOList: [],
          /** 商品分类中文名 */
          categoryName: [],
        },
        /** 表格头 */
        skuTableColumn: [],
        /** 表格数据 */
        skuTableData: [],
        /** 默认的规格参数 */
        skuData: [],
        /** 默认的规格值 */
        skuVals: [],
        // 某一规格名下的规格值
        skuVal: [],
        // 规格展开的项
        open_panel: [1, 2],
        /** 要提交的规格数据*/
        skuInfo: [],
        /** 物流模板 **/
        logisticsTemplate: [],
        /** 固定列校验提示内容 */
        validatatxt: "请输入0~99999999之间的数字值",
        //参数panel展示
        params_panel: [],
        /** 存储未通过校验的单元格位置  */
        validateError: [],
        baseInfoFormRule: {
          goodsName: [regular.REQUIRED, regular.WHITE_SPACE, regular.VARCHAR70],
          // price: [regular.REQUIRED, {
          // 	validator: checkPrice
          // }],
          sellingPoint: [regular.REQUIRED, regular.VARCHAR100],
          goodsUnit: [{
            required: true,
            message: "请选择计量单位"
          }],
          name: [regular.REQUIRED, regular.VARCHAR5],
          value: [regular.REQUIRED, regular.VARCHAR60],
          templateId: [regular.REQUIRED],
          shelfLife: [regular.REQUIRED, regular.WHITE_SPACE, regular.VARCHAR70],
          productionDate: [regular.REQUIRED]
        },
        skuInfoRules: {},
        /** 品牌列表 */
        brandList: [],
        /** 店铺分类列表 */
        shopCategory: [],
        /** 商品单位列表 */
        goodsUnitList: [],
        ignoreColumn: [
          // 添加规格时需要忽略的参数
          "_index",
          "_rowKey",
          "sn",
          "cost",
          "price",
          "weight",
          "quantity",
          "specId",
          "specValueId",
          "fee"
        ],
      };
    },
    methods: {
      memberEndTimecli(v) {
        this.baseInfoForm.productionDate = v
      },
      /**
       * 选择参数
       * @paramsGroup 参数分组
       * @groupIndex 参数分组下标
       * @params 参数选项
       * @paramIndex 参数下标值
       * @value 参数选项值
       */
      selectParams(paramsGroup, groupIndex, params, paramsIndex, value) {
        if (!this.baseInfoForm.goodsParamsDTOList[groupIndex]) {
          this.baseInfoForm.goodsParamsDTOList[groupIndex] = {
            groupId: "",
            groupName: "",
            goodsParamsItemDTOList: [],
          };
        }
        //赋予分组id、分组名称
        this.baseInfoForm.goodsParamsDTOList[groupIndex].groupId = paramsGroup.groupId;
        this.baseInfoForm.goodsParamsDTOList[groupIndex].groupName = paramsGroup.groupName;

        //参数详细为空，则赋予
        if (
          !this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[
            paramsIndex
          ]
        ) {
          this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[
            paramsIndex
          ] = {
            paramName: "",
            paramValue: "",
            isIndex: "",
            // required: "",
            paramId: "",
            sort: "",
          };
        }
        this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[
          paramsIndex
        ] = {
          paramName: params.paramName,
          paramValue: value,
          isIndex: params.isIndex,
          // required: params.required,
          paramId: params.id,
          sort: params.sort,
        };
      },
      // 编辑sku图片
      editSkuPicture(row) {
        if (row.images && row.images.length > 0) {
          this.previewPicture = row.images[0].url;
        }
        this.selectedSku = row;
        this.showSkuPicture = true;
      },
      pre() {
        // 上一步
        this.$parent.activestep--;
      },
      // 预览图片
      handleView(url) {
        this.previewPicture = url;
        this.visible = true;
      },
      // 移除已选图片
      handleRemove(item, index) {
        this.selectedSku.images = this.selectedSku.images.filter((i) => i.url !== item.url);
        if (this.selectedSku.images.length > 0 && index === 0) {
          this.previewPicture = this.selectedSku.images[0].url;
        } else if (this.selectedSku.images.length < 0) {
          this.previewPicture = "";
        }
      },
      // 查看商品大图
      handleViewGoodsPicture(url) {
        this.previewGoodsPicture = url;
        this.goodsPictureVisible = true;
      },
      // 移除商品图片
      handleRemoveGoodsPicture(file) {
        this.baseInfoForm.goodsGalleryFiles = this.baseInfoForm.goodsGalleryFiles.filter(
          (i) => i.url !== file.url
        );
      },
      // 更新sku图片
      updateSkuPicture() {
        this.baseInfoForm.regeneratorSkuFlag = true;
        let _index = this.selectedSku._index;
        this.skuTableData[_index] = this.selectedSku;
      },
      // 选中的地址
      selectedRegionSearch(val) {
        this.baseInfoForm.region = val[1].join(',');
        this.baseInfoForm.regionId = val[0].join(',');
      },
      // sku图片上传成功
      handleSuccess(res, file) {
        if (file.response) {
          file.url = file.response.result;
          this.selectedSku.images = [file];
          this.previewPicture = file.url;
        }
      },
      // 商品图片上传成功
      handleSuccessGoodsPicture(res, file) {
        console.log(res);
        if (file.response) {
          file.url = file.response.result;
          this.baseInfoForm.goodsGalleryFiles.push(file);
        }
      },
      // 图片格式不正确
      handleFormatError(file) {
        this.$Notice.warning({
          title: "文件格式不正确",
          desc: "文件 " + file.name + " 的格式不正确",
        });
      },
      // 图片大小不正确
      handleMaxSize(file) {
        this.$Notice.warning({
          title: "超过文件大小限制",
          desc: "图片大小不能超过3MB",
        });
      },
      // 图片上传前钩子
      handleBeforeUploadGoodsPicture(file) {
        const check = this.baseInfoForm.goodsGalleryFiles.length < 5;
        if (!check) {
          this.$Notice.warning({
            title: "图片数量不能大于五张",
          });
          return false;
        }
      },
      // sku图片上传前钩子
      handleBeforeUpload(file) {
        const check =
          this.selectedSku.images !== undefined && this.selectedSku.images.length > 5;
        if (check) {
          this.$Notice.warning({
            title: "图片数量不能大于五张"
          });
          return false;
        }
      },

      /** 查询商品品牌列表 */
      getGoodsBrandList() {
        API_GOODS.getCategoryBrandListDataSeller(this.categoryId).then((response) => {
          this.brandList = response;
        });
      },
      // 获取商品单位
      GET_GoodsUnit() {
        API_GOODS.getGoodsUnitList().then((res) => {
          if (res.success) {
            this.goodsUnitList = res.result.records.map((i) => i.name);
          }
        });
      },
      // 获取当前店铺分类
      GET_ShopGoodsLabel() {
        API_GOODS.getShopGoodsLabelListSeller().then((res) => {
          if (res.success) {
            let shopCategories = !this.baseInfoForm.storeCategoryPath ? [] :
              this.baseInfoForm.storeCategoryPath.split(",");

            this.shopCategory = res.result.map((i) => {
              i.title = i.labelName;
              i.expand = false;
              i.checked = shopCategories.some((o) => o === i.id);
              i.children = i.children.map((j) => {
                j.title = j.labelName;
                j.expand = false;
                j.checked = shopCategories.some((o) => o === j.id);
                return j;
              });
              return i;
            });
          }
        });
      },
      // 编辑时获取商品信息
      async GET_GoodData(id, draftId) {
        let response = {};
        if (draftId) {
          response = await API_GOODS.getDraftGoodsDetail(draftId);
        } else {
          response = await API_GOODS.getGoods(id);
          this.goodsId = response.result.id;
        }

        response.result.recommend ?
          (response.result.recommend = 1) :
          (response.result.recommend = 0);
        this.baseInfoForm = {
          ...this.baseInfoForm,
          ...response.result
        };
        response.result.storeAddressIdPath != null && response.result.storeAddressIdPath != "" ?
          this.baseInfoForm.salesArea = 1 : this.baseInfoForm.salesArea = 0;
        this.baseInfoForm.release = 1; //即使是被放入仓库，修改的时候也会显示会立即发布
        this.categoryId = response.result.categoryPath.split(",")[2];
        this.baseInfoForm.region = this.baseInfoForm.region ? this.baseInfoForm.region : '';
        this.baseInfoForm.regionId = this.baseInfoForm.regionId ? this.baseInfoForm.regionId : '';
        if (this.baseInfoForm.salesArea + '' === '1') {
          this.morenregionId = this.baseInfoForm.regionId
        }
        if (
          response.result.goodsGalleryList &&
          response.result.goodsGalleryList.length > 0
        ) {
          this.baseInfoForm.goodsGalleryFiles = response.result.goodsGalleryList.map(
            (i) => {
              let files = {
                url: i
              };
              return files;
            }
          );
        }
        this.Get_SkuInfoByCategory(this.categoryId);
        this.renderGoodsDetailSku(response.result.skuList);
        /** 查询品牌列表 */
        this.getGoodsBrandList();
        /** 查询商品参数 */
        this.GET_GoodsParams();
        /** 查询店铺商品分类 */
        this.GET_ShopGoodsLabel();
        this.GET_GoodsUnit();
      },
      // 渲染sku数据
      renderGoodsDetailSku(skuList) {
        let skus = [];
        let skusInfo = [];
        skuList.map((e) => {
          let sku = {
            id: e.id,
            sn: e.sn,
            price: e.price.toString(),
            cost: e.cost,
            quantity: e.quantity,
            weight: e.weight,
            fee: e.fee
          };
          e.specList.forEach((u) => {
            if (u.specName === "images") {
              sku.images = u.specImage;
            } else {
              sku[u.specName] = u.specValue;
              if (
                !skusInfo.some((s) => s.name === u.specName) &&
                !this.ignoreColumn.includes(u.specName)
              ) {
                skusInfo.push({
                  name: u.specName,
                  spec_id: u.specNameId,
                  spec_values: [{
                    id: u.specValueId,
                    name: u.specName,
                    value: u.specValue || "",
                  }, ],
                });
              } else {
                skusInfo = skusInfo.map((sk) => {
                  if (
                    !sk.spec_values.some((s) => s.value === u.specValue) &&
                    sk.name === u.specName
                  ) {
                    sk.spec_values.push({
                      id: u.specValueId,
                      name: u.specName,
                      value: u.specValue || "",
                    });
                  }
                  if (!sk.spec_id && u.specName === "specId") {
                    sk.spec_id = u.specValue;
                  }
                  return sk;
                });
              }
            }
          });
          skus.push(sku);
        });
        this.skuInfo = skusInfo;
        this.renderTableData();
        this.skuTableData = skus;
      },
      /** 根据当前分类id查询商品应包含的参数 */
      GET_GoodsParams() {
        API_GOODS.getCategoryParamsListDataSeller(this.categoryId).then((response) => {
          if (!response || response.length <= 0) {
            return;
          }
          this.goodsParams = response;

          //展开选项卡
          this.goodsParams.forEach((item) => {
            this.params_panel.push(item.groupName);
          });
          if (this.baseInfoForm.goodsParamsDTOList) {
            // 已选值集合
            const paramsArr = [];
            this.baseInfoForm.goodsParamsDTOList.forEach((group) => {
              group.goodsParamsItemDTOList.forEach((param) => {
                param.groupId = group.groupId;
                paramsArr.push(param);
              });
            });
            // 循环参数分组
            this.goodsParams.forEach((parmsGroup) => {
              parmsGroup.params.forEach((param) => {
                paramsArr.forEach((arr) => {
                  if (param.paramName == arr.paramName) {
                    param.paramValue = arr.paramValue;
                  }
                });
              });
            });
          } else {
            this.baseInfoForm.goodsParamsDTOList = [];
          }
        });
      },
      /** 添加规格项 */
      addSkuItem() {
        if (this.skuInfo.length >= 5) {
          this.$Message.error("规格项不能大于5个！");
          return;
        }
        // 写入对象，下标，具体对象
        this.$set(this.skuInfo, this.skuInfo.length, {
          spec_values: [],
          name: "规格名",
        });
        this.renderTableData();
      },
      // 编辑规格名
      editSkuItem() {
        this.renderTableData();
      },
      // 编辑规格值
      async skuValueChange(val, index, item) {
        this.renderTableData();
      },
      // 获取焦点时，取得规格名对应的规格值
      changeSkuVals(name) {
        if (name) {
          this.skuData.forEach((e, index) => {
            if (e === name) {
              if (this.skuVal.length != this.skuVals[index].length) {
                this.skuVal = this.skuVals[index];
              }
            }
          });
        }
      },
      /** 移除当前规格项 进行数据变化*/
      handleCloseSkuItem($index) {
        this.skuInfo.splice($index, 1);
        /**
         * 渲染规格详细表格
         */
        this.renderTableData();
      },
      // 添加规格值的验证
      validateEmpty(params) {
        let flag = true;
        params.forEach((item) => {
          for (var key in item) {
            if (item[key] != "0" && !item.value) {
              this.$Message.error("请必填规格项");
              flag = false;
              return false; // 终止程序
            }
          }
        });

        return flag;
      },
      /** 添加当前规格项的规格值*/
      addSpec($index, item) {
        if (this.validateEmpty(item.spec_values)) {
          if (item.spec_values.length >= 10) {
            this.$Message.error("规格值不能大于10个！");
            return;
          }
          this.$set(item.spec_values, item.spec_values.length, {
            name: item.name,
            value: "",
          });
          this.baseInfoForm.regeneratorSkuFlag = true;
          /**
           * 渲染规格详细表格
           */
          this.renderTableData();
        }
      },

      /** 移除当前规格值 */
      handleCloseSkuValue(item, index) {
        item.spec_values.splice(index, 1);

        this.baseInfoForm.regeneratorSkuFlag = true;
        /**
         * 渲染规格详细表格
         */
        this.renderTableData();
      },

      /**
       * 渲染table所需要的column 和 data
       */
      renderTableData() {
        this.skuTableColumn = [];
        this.skuTableData = [];
        let pushData = [];
        //渲染头部
        this.skuInfo.forEach((sku) => {
          // !sku.name ? (sku.name = "规格名") : "";
          //列名称
          let columnName = sku.name;
          pushData.push({
            title: columnName,
            key: columnName,
          });
        });
        // this.baseInfoForm.goodsType != "VIRTUAL_GOODS" ?
        // 	pushData.push({
        // 		title: "重量",
        // 		slot: "weight",
        // 	}) :
        // 	"";
        pushData.push({
          title: "货号",
          slot: "sn",
        }, {
          title: "库存",
          slot: "quantity",
        }, {
          title: "结算价（人民币）",
          slot: "cost",
        }, {
          title: "零售价（焕贝）",
          slot: "price",
        }, {
          title: "图片",
          slot: "images",
        }, {
          title: "扣率",
          slot: "fee",
        });
        this.skuTableColumn = pushData;
        //克隆所有渲染的数据
        let cloneTemp = cloneObj(this.skuInfo);

        //数据清空一次
        this.$set(this, "skuTableData", []);
        //判定 是否存在规格分组
        if (cloneTemp[0]) {
          //存放最终结果
          let result = [];
          //循环选中的 sku 数据
          cloneTemp[0].spec_values.forEach((specItem) => {
            result.push({
              [cloneTemp[0].name]: specItem.value,
              images: [],
            });
          });
          cloneTemp.splice(0, 1);
          result = this.specIterator(result, cloneTemp);
          this.skuTableData = result;
          console.log(this.skuTableData);
        }
      },
      /**
       * 迭代属性，形成表格
       * result 渲染的数据
       * array spec数据
       */
      specIterator(result, cloneTemp) {
        //是否还可以循环
        if (cloneTemp.length > 0) {
          let table = [];
          result.forEach((resItem) => {
            cloneTemp[0].spec_values.forEach((valItem) => {
              let obj = cloneObj(resItem);
              obj[cloneTemp[0].name] = valItem.value;
              table.push(obj);
            });
          });
          result = [];
          table.forEach((t) => {
            result.push(t);
          });
          //清除当前循环的分组
          cloneTemp.splice(0, 1);
        } else {
          return result;
        }
        return this.specIterator(result, cloneTemp);
      },
      /** 根据分类id获取系统设置规格信息*/
      Get_SkuInfoByCategory(categoryId) {
        if (categoryId) {
          API_GOODS.getGoodsSpecInfoSeller(categoryId).then((res) => {
            if (res.length) {
              res.forEach((e) => {
                this.skuData.push(e.specName);
                const vals = e.specValue ? e.specValue.split(",") : [];
                this.skuVals.push(Array.from(new Set(vals)));
              });
            }
          });
        }
      },
      /** 自动完成表单所需方法*/
      filterMethod(value, option) {
        return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
      },
      /** 数据改变之后 抛出数据 */
      updateSkuTable(row, item, type = "deafult") {
        // console.log(row)
        let index = row._index;
        this.baseInfoForm.regeneratorSkuFlag = true;
        /** 进行自定义校验 判断是否是数字（小数也能通过）重量 */
        if (item === "weight") {
          if (
            !/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(row[item]) ||
            parseInt(row[item]) < 0 ||
            parseInt(row[item]) > 99999999
          ) {
            // 校验未通过 加入错误存储列表中
            this.validateError.push([index, item]);
            this.validatatxt = "请输入0~99999999之间的数字值";
            return;
          }
        } else if (item === "quantity") {
          if (
            !/^[0-9]\d*$/.test(row[item]) ||
            parseInt(row[item]) < 0 ||
            parseInt(row[item]) > 99999999
          ) {
            // 库存
            this.validateError.push([index, item]);
            this.validatatxt = "请输入0~99999999之间的整数";
            return;
          }
        } else if (item === "cost" || item === "price") {
          if (item === "cost") {
            if (
              !regular.money.test(row[item]) ||
              parseInt(row[item]) < 0 ||
              parseInt(row[item]) > 99999999
            ) {
              // 成本价 价格
              this.validateError.push([index, item]);
              this.validatatxt = "请输入0~99999999之间的价格";
              return;
            }
            this.feeclick(row, index)
          } else if (item === "price") {
            if (
              !regular.money.test(row[item]) ||
              parseInt(row[item]) < 0 ||
              parseInt(row[item]) > 99999999
            ) {
              // 成本价 价格
              this.validateError.push([index, item]);
              this.validatatxt = "请输入0~99999999之间的价格";
              return;
            }
            this.feeclick(row, index)
          }
        }
        this.$nextTick(() => {
          this.skuTableData[index][item] = row[item];
        });
        // this.$set(this.skuTableData,[index][item],row[item])
      },
      // 计算扣率
      feeclick(row, index) {
        this.$set(row, 'fee', (row.price ? (row.cost / row.price) : 0).toFixed(2))
        this.skuTableData[index]['fee'] = this.$set(row, 'fee', (row.price ? (row.cost / row.price) : 0).toFixed(2))
      },
      // 店铺分类选择
      selectTree(v) {
        if (v.length > 0) {
          // 转换null为""
          for (let attr in v[0]) {
            if (v[0][attr] == null) {
              v[0][attr] = "";
            }
          }
          let str = JSON.stringify(v[0]);
          let menu = JSON.parse(str);
          this.form = menu;
          this.editTitle = menu.title;
        }
      },
      // 店铺分类选中
      changeSelect(v) {
        this.selectCount = v.length;
        let ids = "";
        v.forEach(function(e) {
          ids += e.id + ",";
        });
        ids = ids.substring(0, ids.length - 1);

        if (ids.length > 100) {
          this.$Message.error("选择了过多的店铺分类，请谨慎选择");
        }
        this.baseInfoForm.storeCategoryPath = ids;
      },
      /**  添加商品 **/
      save() {
        this.submitLoading = true;
        this.$refs["baseInfoForm"].validate((valid) => {
          if (valid) {
            let submit = JSON.parse(JSON.stringify(this.baseInfoForm));
            if (submit.templateId === "") submit.templateId = 0;
            let flag = false;
            let paramValue = "";
            if (flag) {
              this.$Message.error(paramValue + " 参数值不能为空");
              this.submitLoading = false;
              return;
            }
            submit.skuList = this.skuTableData.map((sku) => {
              // 非空判断
              delete sku._index;
              delete sku._rowKey;
              delete sku.specNameId;
              delete sku.specValueId;
              return sku;
            });
            if (!submit.skuList.every(item => {
                console.log(item)
                return Number(item.cost) <= Number(item.price)
              })) {
              this.$Message.error("商品规格项的结算价不能大于零售价！");
              this.submitLoading = false;
              return
            }
            if (submit.goodsGalleryFiles.length > 0) {
              submit.goodsGalleryList = submit.goodsGalleryFiles.map((i) => i.url);
            }
            submit.release ? (submit.release = true) : (submit.release = false);
            submit.recommend ? (submit.recommend = true) : (submit.recommend = false);
            if (this.baseInfoForm.salesArea == '1') {
              if (!this.baseInfoForm.region || this.baseInfoForm.region.length === 0) {
                this.$Message.error('请选择销售区域');
                return;
              }
            }
            submit.region = this.baseInfoForm.region ? this.baseInfoForm.region : '';
            submit.regionId = this.baseInfoForm.regionId ? this.baseInfoForm.regionId : '';
            if (this.goodsId) {
              API_GOODS.editGoods(this.goodsId, submit).then((res) => {
                if (res.success) {
                  this.submitLoading = false;
                  this.$router.go(-1);
                } else {
                  this.submitLoading = false;
                }
              });
            } else {
              API_GOODS.createGoods(submit).then((res) => {
                if (res.success) {
                  this.submitLoading = false;
                  this.$parent.activestep = 2;
                  window.scrollTo(0, 0);
                } else {
                  this.submitLoading = false;
                }
              });
            }
          } else {
            this.submitLoading = false;

            this.$Message.error("还有必填项未做处理，请检查表单");
          }
        });
      },
      /** 保存为模板 */
      saveToDraft() {
        this.baseInfoForm.skuList = this.skuTableData;
        if (this.baseInfoForm.goodsGalleryFiles.length > 0) {
          this.baseInfoForm.goodsGalleryList = this.baseInfoForm.goodsGalleryFiles.map(
            (i) => i.url
          );
        }
        this.baseInfoForm.categoryName = [];
        this.baseInfoForm.saveType = "TEMPLATE";

        if (this.$route.query.draftId) {
          this.baseInfoForm.id = this.$route.query.draftId;
          this.$Modal.confirm({
            title: "当前模板已存在",
            content: "当前模板已存在，保存为新模板或替换原模板",
            okText: "保存新模板",
            cancelText: "替换旧模板",
            closable: true,
            onOk: () => {
              delete this.baseInfoForm.id;
              this.SAVE_DRAFT_GOODS();
              return;
            },
            onCancel: () => {
              this.SAVE_DRAFT_GOODS();
              return;
            },
          });
          return;
        }

        this.$Modal.confirm({
          title: "保存模板",
          content: "是否确定保存",
          okText: "保存",
          closable: true,
          onOk: () => {
            this.SAVE_DRAFT_GOODS();
          },
        });
      },
      SAVE_DRAFT_GOODS() {
        // 保存模板
        API_GOODS.saveDraftGoods(this.baseInfoForm).then((res) => {
          if (res.success) {
            this.$Message.info("保存成功！");
            this.$router.push({
              name: "template-goods"
            });
          }
        });
      },
    },
    mounted() {

      this.accessToken = {
        accessToken: this.getStore("accessToken"),
      };
      // 获取物流模板
      API_Shop.getShipTemplate().then((res) => {
        if (res.success) {
          this.logisticsTemplate = res.result;
        }
      });
      if (this.$route.query.id || this.$route.query.draftId) {
        // 编辑商品、模板
        this.GET_GoodData(this.$route.query.id, this.$route.query.draftId);
      } else {
        // 新增商品、模板
        if (this.firstData.tempId) {
          // 选择模板
          this.GET_GoodData("", this.firstData.tempId);
        } else {
          const cateId = [];
          this.firstData.category.forEach((cate) => {
            this.baseInfoForm.categoryName.push(cate.name);
            cateId.push(cate.id);
          });
          this.categoryId = cateId[2];
          this.baseInfoForm.categoryPath = cateId.toString();
          this.baseInfoForm.goodsType = this.firstData.goodsType;
          /** 获取该商城分类下 商品参数信息 */
          this.GET_GoodsParams();
          /** 查询品牌列表 */
          this.getGoodsBrandList();
          /** 查询分类绑定的规格信息 */
          this.Get_SkuInfoByCategory(this.categoryId);
          // 获取商品单位
          this.GET_GoodsUnit();
          // 获取当前店铺分类
          this.GET_ShopGoodsLabel();
        }
      }
    },
  };
</script>
<style lang="scss" scoped>
  @import "./addGoods.scss";
</style>
